<template>
  <view class="body">
    <!-- 搜索组件 -->
    <nav-bar title="个人中心" @load="handleLoadNav" textAlign="center"></nav-bar>
    <view class="userInfoBox">
      <user-item :userType="1" :userObj="userObj" :jump="false" @status-change="handleStatusChange">
      </user-item>
    </view>
    <view class="userInfoSignature">{{userObj.signature}}</view>
    <tabs-component :data="navList" :active="active" width="50%" @change="handleNavChange">
    </tabs-component>
    <view :style="{ height: contentHeight + 'px' }">
      <custom-scroll-view :scrollHeight="contentHeight" :loadData="handleLoadData" ref="listRef" emptyText="暂无数据">
        <template v-slot="{data}">
          <view class="content">
            <block v-if="active==0">
              <view v-for="item in data.data" class="communityItem" :key="item.articleId">
                <article-block :data="item" :not2User="true" :userShow="false">
                </article-block>
              </view>
            </block>
            <block v-else>
              <view v-for="item in data.data" class="goodsItem" :key="item.goodsId">
                <goods-item :data="item" :goodsType="1">
                </goods-item>
              </view>
            </block>
          </view>
        </template>
      </custom-scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    getUserInfoApi,
    getUserCommunityApi,
    getUserGoodsApi
  } from "@/api/my/userInfo.js"
  const apiFunc = [getUserCommunityApi, getUserGoodsApi];
  export default {
    data() {
      return {
        navList: [{ // 导航栏
          text: "他的文章",
          id: '01'
        }, {
          text: "他的商品",
          id: '02'
        }, ],
        active: 0, // 导航栏选中项
        userId: '', // 所传递过来的用户id
        userObj: {}, // 用户信息
        isInitState: true, // 是否刚进来
        contentHeight: '', // 下拉内容框高度
        moveDistance: 0, // 当前产生的距离
        moveX: 0, // 拖拽时候的X点
        startX: 0, // 初始位置的X点
      };
    },
    onShow() {
      this.getUserInfoObj()
      this.$nextTick(() => {
        this.$refs.listRef.$forceUpdate();
      })
    },
    onLoad(event) {
      this.userId = event.id
      this.$nextTick(() => {
        // this.handleClear()
        this.handleNavChange(0)
      })
      this.handleOn();
    },
    onUnload() {
      uni.$off('article-update');
      uni.$off('follow-update');

    },
    methods: {
      handleClear() {
        this.$refs.listRef.handleRefresher();
      },
      handleLoadNav({
        navHeight,
        height
      }) {
        this.contentHeight = height - navHeight - 81 - 40 - 44;
      },
      // 加载数据
      async handleLoadData(page) {
        let {
          data: res
        } = await apiFunc[this.active](page, this.userId);
        let data = {
          data: res.success ? res.data.userInfo.records : [],
          pages: res.success ? res.data.userInfo.pages : 0,
          success: res.success
        };
        return data;
      },
      //导航栏点击切换
      handleNavChange(index) {
        this.active = index;
        this.$refs.listRef.handleRefresherLoad();
      },
      // 获取用户信息
      async getUserInfoObj() {
        const {
          data: result
        } = await getUserInfoApi(this.userId)
        if (result.code === 200) {
          this.$set(this, 'userObj', result.data.user);
          if (this.userObj.sex == 1) {
            this.navList[0].text = "她的文章"
            this.navList[1].text = "她的商品"
          }
        }
        this.isInitState = false
      },
      handleStatusChange({
        id,
        fansState
      }) {
        this.userObj.fansState = !fansState;
      },

      // 用户点赞操作
      disposeId(id) {
        const result = this.communityObj.dataList.find(
          (item) => item.intactArticleId === id
        );
        if (result.likeStatus == true) {
          result.likeStatus = false;
          if (result.likeStatus == false) {
            result.article.likeNum -= 1;
          }
        } else {
          result.likeStatus = true;
          if (result.likeStatus == true) {
            result.article.likeNum += 1;
          }
        }
      },
      handleOn() {
        // 名:页面通讯 监听 注意key保持一致 
        uni.$on('article-update', (data) => {
          if (data.type == 'article-update') {
            if (this.$refs.listRef && this.$refs.listRef.data) {
              let index = this.$refs.listRef.data.data.findIndex(item => item.articleId == data.value);
              if (index != -1) {
                let obj = JSON.parse(JSON.stringify(this.$refs.listRef.data.data[index].article));
                let _obj = Object.assign(obj, JSON.parse(JSON.stringify(data.data.article)));
                console.log(_obj);
                this.$refs.listRef.$set(this.$refs.listRef.data.data[index], 'article', _obj)
              }
            }
          }
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .body {
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .content {
      padding: 0 32rpx;
      box-sizing: border-box;
    }
  }

  .returnBox {
    width: 100%;
    position: sticky;
    top: 0rpx;
    left: 0rpx;
    padding-bottom: 10px;
    background-color: #eef2f4;
    z-index: 999;
  }

  .userInfoBox {
    padding: 32rpx 32rpx 0rpx;
    background-color: #ffffff;
  }

  .userInfoSignature {
    color: #7A7A7A;
    font-size: 24rpx;
    padding: 16rpx 32rpx 32rpx;
    background-color: #ffffff;
  }

  .goodsNav {
    font-size: 28rpx;
    font-weight: bold;
    margin: 32rpx 32rpx 0rpx 32rpx;
  }

  .serachLoading {
    width: 100%;
    text-align: center;
    line-height: 255px;
    color: #AEAEAE;
  }





  .communityItem {
    margin-top: 32rpx;

    &:last-child {
      margin: 32rpx 0rpx;
    }
  }

  .goodsItem {
    margin-top: 32rpx;

    &:last-child {
      margin: 32rpx 0rpx;
    }
  }
</style>